<template>
  <div class="overview-container">
    <TopTitle name="总览" :isSearch="false"></TopTitle>

    <div class="overview-section">
      <gatherView></gatherView>
    </div>

    <div class="overview-layout">
      <div class="overview-main">
        <datasView></datasView>
      </div>
      <div class="overview-side">
        <CommentView :pageSize="4" height="516px"></CommentView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import gatherView from '@/components/overview/gatherView.vue';
import datasView from '@/components/overview/datasView.vue';
import TopTitle from '@/components/bar/TopTitle.vue';
import { CommentView } from '@/components/reply';
</script>

<style lang="less" scoped>
// 全局变量
@container-max-width: 1400px;
@container-padding: 24px;
@section-spacing: 40px;
@card-spacing: 24px;
@transition-time: 0.4s;

// 页面容器
.overview-container {
  max-width: @container-max-width;
  margin: 0 auto;
  padding: 0 @container-padding;
  width: 100%;

  // 内容区块通用样式
  .overview-section {
    margin-bottom: @section-spacing;
    animation: fadeInUp 0.6s ease-out;
  }

  // 双栏布局容器
  .overview-layout {
    display: flex;
    gap: @card-spacing;
    margin-bottom: @section-spacing;

    // 主内容区域（数据图表）
    .overview-main {
      flex: 1.5;
      min-width: 0; // 防止flex子项溢出
      animation: fadeInLeft 0.7s ease-out;
    }

    // 侧边栏（评论区）
    .overview-side {
      flex: 1;
      min-width: 0; // 防止flex子项溢出
      animation: fadeInRight 0.7s ease-out;
    }
  }
}

// 响应式布局
@media (max-width: 1200px) {
  .overview-container {
    padding: 0 20px;

    .overview-section {
      margin-bottom: 32px;
    }

    .overview-layout {
      gap: 20px;
    }
  }
}

@media (max-width: 992px) {
  .overview-container {
    .overview-layout {
      .overview-main {
        flex: 1.2;
      }

      .overview-side {
        flex: 0.8;
      }
    }
  }
}

@media (max-width: 768px) {
  .overview-container {
    padding: 0 16px;

    .overview-layout {
      flex-direction: column;
      gap: 24px;

      .overview-main,
      .overview-side {
        width: 100%;
      }
    }

    .overview-section {
      margin-bottom: 24px;
    }
  }
}

@media (max-width: 480px) {
  .overview-container {
    padding: 0 12px;

    .overview-section {
      margin-bottom: 20px;
    }

    .overview-layout {
      gap: 20px;
    }
  }
}

// 入场动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>